<template>
  <div class="order">
    <van-nav-bar
      fixed
      :placeholder="false"
      safe-area-inset-top
      :z-index="1"
      :border="false"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" />
      </template>
    </van-nav-bar>
    <van-tabs
      v-model="active"
      color="#666EE8"
      title-active-color="#666EE8"
      sticky
      :offset-top="'.4rem'"
    >
      <van-tab
        v-for="(item, index) in Tab"
        :key="index"
        :title="item"
        class="topNum"
      >
        <orderList v-for="(item,index) in orederList" :key="index" :orederList="item"></orderList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Tabbar, TabbarItem, Icon } from "vant";
import orderList from "./orderList";

Vue.use(Icon);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    orderList,
  },
  data() {
    return {
      active: 0,
      Tab: ["全部", "待发货", "待付款", "待收货", "待评价"],
      orederList:[],
      orederListAll: [
        {
          id: 0, //订单编号
          shopId: 100,
          shop: "SWA旗舰店",
          goods: [
            {
              goodId: 122,
              goodImg:"//img12.360buyimg.com/n2/jfs/t25792/11/1573165928/374707/b9ee91ca/5bb5b547N128c8d7d.jpg",
              goodName: "MCM Patricia Visetos系列女士单肩斜挎可拆卸包",
              goodStyle: "蓝色",
              count: 1,
              price: 299.0,
            },
          ],
          orderPrice: 299.0,
          orderState: 0, // 0待付款  1待发货 2待收获 3待评价
        },
        {
          id: 0, //订单编号
          shopId: 100,
          shop: "SWA旗舰店",
          goods: [
            {
              goodId: 122,
              goodImg:"//img12.360buyimg.com/n2/jfs/t25792/11/1573165928/374707/b9ee91ca/5bb5b547N128c8d7d.jpg",
              goodName: "MCM Patricia Visetos系列女士单肩斜挎可拆卸包",
              goodStyle: "蓝色",
              count: 1,
              price: 299.0,
            },
          ],
          orderPrice: 299.0,
          orderState: 1, // 0待付款  1待发货 2待收获 3待评价
        },
        {
          id: 0, //订单编号
          shopId: 100,
          shop: "SWA旗舰店",
          goods: [
            {
              goodId: 122,
              goodImg:"//img12.360buyimg.com/n2/jfs/t25792/11/1573165928/374707/b9ee91ca/5bb5b547N128c8d7d.jpg",
              goodName: "MCM Patricia Visetos系列女士单肩斜挎可拆卸包",
              goodStyle: "蓝色",
              count: 1,
              price: 299.0,
            },
          ],
          orderPrice: 299.0,
          orderState: 2, // 0待付款  1待发货 2待收获 3待评价
        },
        {
          id: 0, //订单编号
          shopId: 100,
          shop: "SWA旗舰店",
          goods: [
            {
              goodId: 122,
              goodImg:"//img12.360buyimg.com/n2/jfs/t25792/11/1573165928/374707/b9ee91ca/5bb5b547N128c8d7d.jpg",
              goodName: "MCM Patricia Visetos系列女士单肩斜挎可拆卸包",
              goodStyle: "蓝色",
              count: 1,
              price: 299.0,
            },
          ],
          orderPrice: 299.0,
          orderState: 3, // 0待付款  1待发货 2待收获 3待评价
        },
        {
          id: 0, //订单编号
          shopId: 100,
          shop: "SWA旗舰店",
          goods: [
            {
              goodId: 122,
              goodImg:"//img12.360buyimg.com/n2/jfs/t25792/11/1573165928/374707/b9ee91ca/5bb5b547N128c8d7d.jpg",
              goodName: "MCM Patricia Visetos系列女士单肩斜挎可拆卸包",
              goodStyle: "蓝色",
              count: 1,
              price: 299.0,
            },
          ],
          orderPrice: 299.0,
          orderState: 1, // 0待付款  1待发货 2待收获 3待评价
        },
      ]
    };
  },
  mounted() {
    this.active = Number(this.$route.query.active);
    this.orederList = this.orederListAll
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    sortOrder(i){
      let arr =[]
      for(let value of this.orederListAll){
        if(i === value.orderState){
          arr.push(value)
        }
      }
      return arr
    }
  },
  watch:{
    active(i){
      switch(i){
        case 0:
          this.orederList = this.orederListAll
          break;
        case 1: //待发货
          this.orederList = this.sortOrder(1)
          break;
        case 2:  //待收获
          this.orederList = this.sortOrder(2)
          break;
        case 3: //待评价
          this.orederList = this.sortOrder(3)
          break;
      }
    }
  }
};
</script>


<style lang="stylus" scoped>
.order{
  background #F2F2F2
}
.topNum {
  margin-top: 0.4rem;
}

.order {
  height: 100%;
  overflow-y: auto;
}

.search {
  width: 100vw;
  background: red;
}
</style>
